<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>猫猫赚钱给鹅鹅买车买房呀</title>
<style>
	body{
		font:12pt Verdana,Arial,Georgia,sans-serif;
	}
	
	#nav{
		width:150px;
		float:left;
		margin-top:12px;
		margin-right:18px;
	}
	#content{
		width:550px;
		float:left;
	}
	#nav a{
		text-decoration:none;
	}
	
	#content a{
		text-decoration:none;
		font-weight:bold;
	}
	#nav ul{
		list-style:none;
		margin:12px 0px 0px 0px;
		padding:0px;
	}
	#nav ul li{
		border-bottom:1px solid #fff;
	}
	#nav ul li a:link,#nav ul li a:visited{
		font-size:10px;
		font-weight:bold;
		display:block;
		padding:3px 0px 3px 3px;
		background-color:#628794;
		color:#fff;
	}
	#nav ul li a:hover,#nav ul li a:active{
		font-size:10px;
		font-weight:bold;
		display:block;
		padding:3px 0px 3px 3px;
		background-color:#6cac46;
		color:#fff;
	}
	#nav ul ul{
		margin:0px;
		padding:0px;
	}
	#nav ul ul li{
		border-bottom:none;
	}
	#nav ul ul li a:link,#nav ul ul li a:visited{
		font-size:8pt;
		font-weight:bold;
		display:block;
		padding:3px 0px 3px 18px;
		background-color:#628794;
		color:#fff;
	}
	#nav ul ul li a:hover,#nav ul ul li a:active{
		font-size:8pt;
		font-weight:bold;
		display:block;
		padding:3px 0px 3px 18px;
		background-color:#c6a648;
		color:#000;
	}
</style>
</head>

<body>
	<div id='nav'>
  	<ul>
    	<li><a href='#'>Mission</a></li>
      <li><a href='#'>History</a></li>
      <li><a href='#'>Executive Team</a>
        <ul>
          <li><a href='#'>&raquo; CEO</a></li>
          <li><a href='#'>&raquo; CFO</a></li>
          <li><a href='#'>&raquo; COO</a></li>
          <li><a href='#'>&raquo; Other Minions</a></li>
        </ul>
       </li>
      <li><a href='#'>Contact Us</a></li>
    </ul>
  </div>
  <div id='content'>
  	<h1>About Us</h1>
    <p>On the introductiory pages of main sections,it can be useful
    to repeat the secondarhy navigation and provide more context,
    such as:</p>
    <ul>
    	<li><a href='#'>Mission</a>:Learn more abouyt our corporate
      mission and philanthropic efforts.</li>
      <li><a href='#'>History</a>:Read about our corporate history
      and learn how we grew to become the largest widget maker
      in the country.</li>
      <li><a href='#'>Executive Team</a>:Our team of executives makes
      the company run like a well-oiled machine (also useful for
      making widgets).</li>
      <li><a href='#'>Contact Us</a>:Here you can find multiple
      methods for contacting us (and we really do care what you
      have to say).</li>
    </ul>
  </div>
</body>
</html>
